feat(test): Add Clerk Elements E2E#3394
Conversation
🦋 Changeset detectedLatest commit: ff3e23f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
LekoArts
force-pushed
the
lekoarts/sdk-1721-add-e2e-tests-to-normal-ci
branch
from
edfefd2 to
4ddd59a
Compare
LekoArts
force-pushed
the
lekoarts/sdk-1721-add-e2e-tests-to-normal-ci
branch
from
428a6d0 to
ab29eff
Compare
| * Allowing 10^5 combinations should be enough entropy for e2e purposes. | ||
| * @see https://clerk.com/docs/testing/e2e-testing#phone-numbers | ||
| */ | ||
| function fakerPhoneNumber() { |
| }, | ||
| waitForMounted: () => { | ||
| return page.waitForSelector('.cl-signIn-root', { state: 'attached' }); | ||
| waitForMounted: (selector = '.cl-signIn-root') => { |
| }, | ||
| "dependencies": { | ||
| "@clerk/elements": "file:../../../packages/elements", | ||
| "@clerk/nextjs": "file:../../../packages/nextjs", |
There was a problem hiding this comment.
☁️ I think we should drop the 2 lines above. We are not passing the deps added in presets in the package.json of the template in the other integration tests.
cc: @nikosdouvlis
There was a problem hiding this comment.
This way you can run the template locally just fine without needing to install them first. With .addDependency these entries are overwritten
| "@types/node": "^18.17.0", | ||
| "@types/react": "^18.3.1", | ||
| "@types/react-dom": "^18.3.0", | ||
| "next": "^14.2.3", |
There was a problem hiding this comment.
❓ shouldn't we use the 13.5.4 since it's the minimum supported version defined in elements peer dependencies?
There was a problem hiding this comment.
This can be handled with something like #3431
| export default function RootLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <html lang='en'> | ||
| <ClerkProvider clerkJSVariant='headless'> |
There was a problem hiding this comment.
❓ Why headless? Is this the suggested approach when using the elements package?
There was a problem hiding this comment.
Right now the integration tests don't need the AIO components and eventually people should use headless, yes.
5 participants
Description
This PR adds Playwright E2E tests for Clerk Elements. Included are:
next-sign-in.test.ts- Mirrors the existingsign-in-flow.test.tsfile to assert that one can successfully sign innext-sign-up.test.ts- Mirrors the existingsign-up-flow.test.tsfile to assert that one can successfully sign upotp.test.ts- Assert that<Input type="otp" />works correctlyvalidate-password.test.ts- Assert that<Input type="password" validatePassword />works correctlyMoreover, this PR also fixes this Faker.js deprecation message:
This issue explains how to use
replaceSymbolWithNumberbut that's also deprecated and its docs explain what to use instead.Fixes SDK-1721
Fixes SDK-1382
Checklist
npm testruns as expected.npm run buildruns as expected.Type of change